<template>
	<view class="home">
		
		<!-- navnbar 自定义导航栏 -->
		<navbar></navbar>
		<tab :list="tablList" @tab="tab" :tabIndex="tabIndex"></tab>
		
		<view class="home-list">
			<list :tab="tablList" :activeIndex="activeIndex" @change="change"></list>
		</view>
		
		<!-- <list-scroll>
			<list-card mode='base'></list-card>
			<list-card mode='image'></list-card>
			<list-card mode='column'></list-card>
		</list-scroll> -->
	</view>
</template>

<script>
	//easyCom 功能 当引入目录为 component/组件名/组件名.vue
	// import navbar from "@/components/navbar/navbar.vue"
	import {mapState} from "vuex"
	
	export default {
		// comments:{
		// 	navbar
		// },
		data() {
			return {
			  tablList:[],
			  tabIndex:0,
			  activeIndex:0,
			}
		},
		computed:{
			...mapState(["userinfo"])
		},
		watch:{
			userinfo(newVal){
				this.getLabel()
			}
		},
		onLoad() {
			uni.$on('labelChange',(res)=>{
				// console.log('首页接收到了标签页的数据',res)
				
				// this.tablList=[]
				this. tabIndex=0
				this.activeIndex=0
				// this.getLabel()
			})
			this.getLabel()
		},
		onShow() {
			// console.log("首页")
			// this.getLabel()
		},
		methods: {
			change(current){
				// console.log('swiper的值'+current);
				this.tabIndex=current
				this.activeIndex=current
				
			},
			getLabel(){
				console.log(this.$api)
				this.$api.get_label().then((res)=>{
					console.log(res)
					const {data} = res //const {} =res 是解析res 里面的result
					console.log(data)
					data.unshift({
						name:'全部'
					})
					console.log(data)
						this.tablList = data
						console.log("标签",this.tablList)
				})
				
				
				//获取云函数方法
				// uniCloud.callFunction({
				// 	name:"get_label",
				// 	// success(res){
				// 	// 	console.log(res)
				// 	// }
				// }).then((res)=>{
				// 	const {result} = res //const {} =res 是解析res 里面的result
				// 	this.tablList = result.data
				// 	console.log(this.tablList)
				// })
			},
			tab({data,index}){
				// console.log(data,index)
				this.activeIndex = index
			}
		}
	}
</script>

<style lang="scss">
	page{
		height:100%;
		display:flex;
	}
	.home{
		
		display:flex;
		flex-direction: column;
		flex:1;//充满整个页面
		// border:2px solid red;
		overflow: hidden;
		
		.home-list{
			// height:100%;
			flex:1;
			box-sizing: border-box;
			// border:2px solid red;
		}
		
		
	}
</style>
